<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>标题</title> 
<link href="./css/ionic.css" rel="stylesheet"> 
<script src="./js/ionic.bundle.min.js"></script>
<style type="text/css">
.slider{height: 100%;}
.slider-slide{color: #000; background-color: #fff; text-align: center; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }
.blue{background-color: blue;}
.yellow{background-color: yellow;}
.pink{background-color: pink;}
.box{height:100%;} 
.box h1{position:relative; top:50%; transform:translateY(-50%);}
</style>
</head> 
<body ng-app="myApp" animation="slide-left-right-ios7" ng-controller="myAppController">
	<ion-slide-box active-slide="myActiveSlide">
		<ion-slide>
			<div class="box blue"><h1>BLUE</h1></div>
		</ion-slide>
		<ion-slide>
			<div class="box yellow"><h1>YELLOW</h1></div>
		</ion-slide>
		<ion-slide>
			<div class="box pink"><h1>PINK</h1></div>
		</ion-slide>
	</ion-slide-box>
</body>
<script type="text/javascript">
var myApp = angular.module("myApp",['ionic']);
myApp.controller('myAppController',function($scope,$ionicPopup,$timeout){
	//$scope.myActiveSlide = 1;
});
</script>
</html>